/* ==================
		弹性布局
 ==================== */
.flex {
	display: flex !important;
	&-sub {
		flex: 1 !important;
	}
	&-twice {
		flex: 2 !important;
	}
	&-treble {
		flex: 3 !important;
	}
	&-column {
		flex-direction: column !important;
	}
	&-row {
		flex-direction: row !important;
	}
	&-column-reverse {
		flex-direction: column-reverse !important;
	}
	&-row-reverse {
		flex-direction: row-reverse !important;
	}
	&-wrap {
		flex-wrap: wrap !important;
	}
	&-center {
		@include flex-center;
	}
	&-bar {
		@include flex-bar;
	}
}
.basis {
	@each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
		&-#{$class} {
			flex-basis: $value !important;
		}
	}
}
.align {
	@each $class, $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
		&-#{$class} {
			align-items: $value !important;
		}
	}
}
.self {
	@each $class, $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
		&-#{$class} {
			align-self: $value !important;
		}
	}
}
.justify {
	@each $class, $value in (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around) {
		&-#{$class} {
			justify-content: $value !important;
		}
	}
}
